<!-- 选择收货地址界面 -->
<template>
	<view class="total-view" v-for="(item,index) in address" :key="index">
		<view class="receiver-address receiver-flex" @click="choose(item)">

			<!-- 地址详细信息 -->
			<view>
				<view class="receiver-name receiver-flex">
					<text>{{item.name}}</text>
					<text>{{item.telephone}}</text>
				</view>
				<text>{{item.region + item.address}}</text>
			</view>

			<!-- 选择某个地址右边出现的小绿勾 -->
			<view v-if="item.isChecked">
				<icon class="icon-small" type="success_no_circle" size="23"></icon>
			</view>
		</view>

		<!-- 设置默认 -->
		<view class="default-address receiver-flex">
			<!-- 设置为默认地址后让事件 pointer-events: none; -->
			<view class="receiver-flex" :class="[item.isChecked ? 'disable' : '']" @click="setDefault(item._id,index)">
				<icon class="icon-small" type="success" size="23" v-if="item.isChecked"></icon>
				<text class="default-padding">{{item.isChecked ? '已设为默认' : '设为默认'}}</text>
			</view>
			<view class="receiver-flex">
				<text @click="del(item._id,index)">删除</text>
				<text class="default-padding" @click="modify(item,item._id)">修改</text>
			</view>
		</view>
	</view>

	<!-- 没有数据的提示 -->
	<view class="tips" v-if="address.length == 0">这里空空的，赶紧添加一个吧~</view>

	<!-- 底部新建地址按钮 -->
	<view style="height: 300rpx;"></view>
	<view class="new-address" @click="newAddress">
		<text>+</text>
		<text>新建地址</text>
	</view>

	<!-- 新建地址弹窗 通过父子通信在子组件提交成功后获取所有收货地址 -->
	<NewAddress @update="getAddress"></NewAddress>

</template>

<script setup>
	import NewAddress from '@/pages/receiver-address/child/new-address.vue'
	import { receive_box } from "@/public/package-js/passValue.js"
	import { onMounted, reactive, toRefs } from 'vue'
	import { FeedBack } from '../../public/package-js/feedBack';

	// 请求数据
	onMounted(() => {
		getAddress()
	})

	const data = reactive({
		address: [], // 存储所有的收货地址信息
	})
	const { address } = toRefs(data)

	// 1、获取所有收货地址数据
	const db = wx.cloud.database()
	async function getAddress() {
		const res = await db.collection('receiver_address').get()
		data.address = res.data
	}

	// 2、设置默认地址
	async function setDefault(id,index) {
		try {
			// 将所有收货地址 isChecked 设为 false
			await db.collection('receiver_address').where({isChecked:true}).update({ 
				data: { isChecked: false }
			})
			data.address.forEach(item=> item.isChecked = false)
			
			// 更改选择的 isChecked 为 true
			await db.collection('receiver_address').doc(id).update({ data: { isChecked: true } })
			data.address[index].isChecked = true
			
		} catch (e) {
			new FeedBack('设置失败','error').toast()
		}
	}

	// 3、删除
	function del(id, index) {
		uni.showModal({
			title: '提示',
			content: '确认删除该地址吗',
			success: async function(res) {
				if (res.confirm) {
					try {
						await db.collection('receiver_address').doc(id).remove()
						data.address.splice(index, 1)
						new FeedBack("删除成功", "success").toast()
					} catch (e) {
						new FeedBack("删除失败").toast()
					}
				} else if (res.cancel) {
					new FeedBack("取消操作", "none").toast()
				}
			}
		});

	}

	// 4、点击修改地址调用弹窗
	function modify(item, id) {
		// console.log("item",item);
		receive_box.modifyData = item
		receive_box.mod_id = id
		receive_box.option = 'mod' //'mod'是修改、
		receive_box.isShow = true
	}

	// 5、点击按钮调用弹窗新建地址
	function newAddress() {
		receive_box.isShow = true
		receive_box.option = 'add'
	}

	// 6、选择地址传值返回上一页面
	function choose(item) {
		console.log("item",item);
		receive_box.selectAddress = item
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style>
	page {
		background-color: #fafafa;
	}

	.total-view {
		background-color: #FFFFFF;
		padding: 20rpx;
		margin: 20rpx 0;
	}

	.receiver-address {
		justify-content: space-between;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #e1e1e1;
	}

	.receiver-flex {
		display: flex;
		align-items: center;
	}

	.receiver-name text:nth-child(1) {
		font-weight: bold;
		padding-right: 20rpx;
	}

	.receiver-name text:nth-child(2) {
		color: #8c8c8c;
	}

	.receiver-name {
		padding-bottom: 20rpx;
	}

	/* 默认地址 */
	.default-address text {
		display: block;
		color: #8c8c8c;
	}

	.default-address {
		justify-content: space-between;
		padding-top: 20rpx;
	}

	.default-padding {
		padding-left: 30rpx;
	}

	/* 禁用点击 */
	.disable {
		pointer-events: none;
	}

	/* 新建地址按钮 */
	.new-address {
		background-color: #ea445a;
		height: 80rpx;
		text-align: center;
		line-height: 72rpx;
		position: fixed;
		color: #FFFFFF;
		font-size: 33rpx;
		border-radius: 10rpx;
		left: 20rpx;
		right: 20rpx;
		bottom: 68rpx;
	}

	.new-address>text:nth-of-type(1) {
		font-size: 44rpx;
		margin-right: 12rpx;
	}
</style>
